<template>
  <div class="container">
    <div class="title">
      <h2>{{ articleItem.title }}</h2>
      <span>{{ articleItem.createTime | parseTimeByString }}</span>
      <span>{{ articleItem.username }}</span>
      <i class="el-icon-view"></i>
      <span>{{ articleItem.visits }}</span>
    </div>

    <div v-html="articleItem.articleBody" class="content"></div>
  </div>
</template>

<script>
export default {
  name: 'ArticlesPreview',
  components: {},
  props: {
    articleItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {},
  methods: {},
  computed: {},
  watch: {},
  filters: {}
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    h2 {
      margin: 0;
    }
    span {
      margin: 10px;
    }
  }
  .content {
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;
    margin-top: 20px;
  }
}
</style>
